<template>
  <main-layout>
    <div class="bodys">
      <div class="container">
        <div class="back"><button @click="back">⇐</button></div>
        <div class="nav"><h2>详情</h2></div>
        <div class="booksList" v-for="item in list" :key="item.title">
          <div class="img1"><img :src="item.src" alt="" /></div>
          <div class="box-right">
            <div class="name">书名：{{ item.name }}</div>
            <div class="author">作者：{{ item.author }}</div>
            <div class="title">详情：{{ item.title }}</div>
            <div class="press">出版社：{{ item.press }}</div>
            <div class="price">
              价格：<font color="red">￥{{ item.price }}</font>
            </div>
            <button class="bth" @click="addCart(item)">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </main-layout>
</template>
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    let more = JSON.parse(sessionStorage.getItem("more"));
    this.list.push(more);
    console.log(this.list);
  },

  methods: {
    back() {
      this.$router.go(-1);
    },
    addCart(item) {
      var obj = {
        id: item.id,
        src: item.src,
        title: item.title,
        price: item.price,
        num: 1,
        oneValue: false,
      };
      let open = false;
      let cartM = JSON.parse(sessionStorage.getItem("cartlist")) || [];
      console.log(cartM);
      this.cartList = cartM;
      //  for(item in cartM){
      //    if(item.title==obj.title){
      //       open=true
      //       return
      //    }
      //  }
      let index = "";
      for (let i = 0; i < cartM.length; i++) {
        if (cartM[i].title == obj.title) {
          open = true;
          index = i;
        }
      }
      if (!open) {
        this.cartList.push(obj);
      } else {
        this.cartList[index].num++;
      }
      sessionStorage.setItem("cartlist", JSON.stringify(this.cartList));
      Toast.success("加入成功");
      // this.$router.push("/cart");
    },
  },
};
</script>
<style lang="less" scoped>
.bodys {
  width: 100%;
  height: 100%;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    .back {
      position: absolute;
      font-size: 20px;
      left: 10px;
      button {
        border: none;
      }
    }
    .nav {
      width: 100%;
      h2 {
        text-align: center;
        color: #69696d;
      }
    }
    .booksList {
      width: 100%;
      height: 100%;
      .img1 {
        width: 100%;
        height: 385px;
        img {
          width: 85%;
          height: 80%;
          margin-left: 35px;
          border-radius: 10px;
          margin-top: 30px;
        }
      }
      .box-right {
        position: relative;
        .name {
          font-size: 20px;
          margin-left: 10px;
        }
        .author {
          margin-top: 15px;
          margin-left: 10px;
          color: #69696d;
        }
        .title {
          margin-top: 15px;
          margin-left: 10px;
          color: #69696d;
        }
        .press {
          margin-top: 15px;
          margin-left: 10px;
          color: #69696d;
        }
        .price {
          margin-top: 25px;
          margin-left: 10px;
          font-size: 20px;
        }
        .bth {
          width: 100px;
          height: 45px;
          background-color: red;
          color: #fff;
          border-radius: 10px;
          position: absolute;
          right: 15px;
          top: 205px;
          border: none;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
